/*
  学习目标：掌握受控组件
  类似： v-model
  场景：💥💥
    1. 收集表单数据 
    2. 回填表单
*/

import React, { Component } from 'react';

export default class App extends Component {
  state = {
    msg: 'hello React',
  };

  handleChange = (e) => {
    // 2. onChange配合setState修改数据
    this.setState({ msg: e.target.value });
  };
  render() {
    return (
      <div>
        <input
          // 1. state控制表单的value或checked属性
          value={this.state.msg}
          // 💥 在React中， React使用onChange替代onInput
          onChange={this.handleChange}
          // 💥 在React中， React使用onBlur作为失去焦点事件
          onBlur={() => {
            console.log('123  ----->  ', 123);
          }}
          type="text"
        />
      </div>
    );
  }
}
